<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        /* 
        1- null,undefined,true,false不会进行渲染
        2- 不要直接写函数与对象
        3- 如果插入的是一个数组，那么会直接将数据的元素进行展开并渲染。
        4- 如果插入的是一个React元素，可以直接渲染
       */

    //    let num = 100;
    //     let vDom = (
    //         <span>999</span>
    //     )
    //   ReactDOM.createRoot(document.querySelector('#root')).render((
    //             <div>   
    //                 <p>111</p>
    //                 <p>{num}</p>
    //                 <p>{111}</p>
    //                 <p>{null}</p>
    //                 <p>{undefined}</p>
    //                 <p>{true}</p>
    //                 <p>{false}</p>
    //                 <p>{(function(){return 100})()}</p>
    //                 <p>{[1,2,3,4]}</p>
    //                 <p>{vDom}</p>
    //                 <p><span>888</span></p>
    //                 {/*<p>{{a:1}}</p>*/}
    //             </div>
    //   ))

        // 2- 数组进行展开
        // const arr = [1,2,3,4];
        // ReactDOM.createRoot(document.getElementById('root')).render((
        //     <div>
        //         <div>
        //             {arr.map(item=>item)}    
        //         </div>   
        //         <br/>    
        //         <div>
        //             {arr.map((item,index)=><h3 key={index}>{item}</h3>)}    
        //         </div> 
        //     </div>
        // ))

        // 3- style className
        const s1 = {
            color:"blue"
        }
        const one = "two";
        const imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF";
        const obj = {
            width:300,
            src:"https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
        }
            ReactDOM.createRoot(document.querySelector('#root')).render((
                <div>
                    <p style={{color:'red',background:'green'}}>123</p>
                    <p style={s1}>234</p>    
                    <p className='one'>456</p>    
                    <p className={one}>789</p> 
                    <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt=""/> 
                    <img width="200" src={imgSrc}  alt=""/>  
                    <img width={obj.width} src={obj.src}  alt=""/>  
                    <img {...obj} alt=""/>
                </div>
            ))
    </script>
</body>

</html>